<template>
  <div class="application-version">
    <span class="table-blue" @click="back">
      <i class="iconfont icon-left"></i>返回
    </span>
    <div>
      <Table class="application-version-content" :columns="columns7" :data="versionData">
        <template slot="cnName">
          <span>{{this.$route.query.name}}</span>
        </template>
        <template slot-scope="{ row }" slot="createdDate">
          <span>{{formatDateByStringMatch(row.createdDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="lastModifiedDate">
          <span>{{formatDateByStringMatch(row.lastModifiedDate, 'yyyy-MM-dd HH:mm:ss')}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div class="table-form-action-box">
            <span class="table-blue action-btn" style="margin-right: 10px;" @click="viewLog(row)">查看构建日志</span>
          </div>
        </template>
      </Table>
      <Page
        style="margin-bottom: 10px;"
        v-show="pagination.total > pagination.pageSize || pagination.pageSize > 10"
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
        :total="pagination.total"
        :current="pagination.current"
        :page-size="pagination.pageSize"
        :transfer="true"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import { getAppVersion } from 'http/api/application';
import { formatDateByStringMatch } from 'assets/scripts/common';
export default {
  name: 'ApplicationVersion',
  data () {
    return {
      pagination: {
        total: 10,
        current: 1,
        pageSize: 10
      },
      columns7: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'cnName',
          slot: 'cnName'
        },
        {
          title: '构建号',
          key: 'buildNumber'
        },
        {
          title: '分支',
          key: 'branch'
        },
        {
          title: '版本',
          key: 'version'
        },
        {
          title: '创建时间',
          key: 'createdDate',
          slot: 'createdDate'
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          slot: 'action'
        }
      ],
      versionData: [],
      formatDateByStringMatch: formatDateByStringMatch
    };
  },

  methods: {
    back () {
      this.$router.push({ path: '/home/application/appList' })
    },
    viewLog (row) {
      this.$router.push({ path: '/home/application/appBuildLog?appId=' + row.appId + '&buildNumber=' + row.buildNumber + '&id=' + this.$route.query.id });
    },
    changePageNum (pageNum) {
      this.pagination.current = pageNum;
      this.getList();
    },
    changePageSize (size) {
      this.pagination.pageSize = size;
      this.changePageNum(1);
    },
    getList () {
      let param = {
        id: this.$route.query.id,
        page: this.pagination.current,
        size: this.pagination.pageSize
      };
      getAppVersion(param).then(res => {
        if (res) {
          this.versionData = res.items;
          this.pagination.total = res.total;
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    }
  },
  mounted () {
    this.getList();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.application-version {
  padding: 20px;
  .application-version-content {
    margin: 20px 0;
  }
}
</style>

<style lang="less">
</style>
